﻿
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="content-script-type" content="text/javascript">
    <script type="text/javascript" src=/static/js/echarts-all.js></script>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#clicked").click(function(){
              console.log('click');
              var name=$("#name");
              var pass=$("#pass");
              var gunName = $("#item")[0].value;
              var selectType = $("#selectType  option:selected").val();
              //var selectType = $("#selectType  option:selected").text();
              
              $.post("/index/",
              {
                gunName:gunName,
                type:selectType
              },
              function(data,status){
                var data =  jQuery.parseJSON(data);
                if (data){
                  var result = data.gunDict;
                  console.log(result);
                  console.log(result.length);
                  if (result.length > 0){
                    //$("#title").append("<h4>content</h4>")
                    var table = $("#sr");
                    $("#sr tbody").empty();
                    var tr = null;
                    if(data.Selecttype == '1'){        
                      tr = "<tr><th>ID</th><th>枪支名称</th><th>枪支编号</th></tr>"             
                    }else if (data.Selecttype == '2'){
                      tr = "<tr><th>ID</th><th>投掷物名称</th><th>投掷物编号</th></tr>"
                    }else if (data.Selecttype == '3'){
                      tr = "<tr><th>ID</th><th>角色名</th><th>角色编号</th></tr>"
                    }else if (data.Selecttype == '4'){
                      tr = "<tr><th>ID</th><th>怪物名称</th><th>怪物编号</th></tr>"
                    }else if (data.Selecttype == '5'){
                      tr = "<tr><th>ID</th><th>冷兵器名称</th><th>冷兵器编号</th></tr>"
                    }else if (data.Selecttype == '6'){
                      tr = "<tr><th>ID</th><th>道具名称</th><th>道具编号</th></tr>"
                    }
                    table.append(tr);
                    $(result).each(function(index){
                         var val = result[index];
                         var index = index + 1;
                         var tr = "<tr><td>"+index+"</td>"+"<td>"+val.item+"</td>"+ "<td>" + val.ID + "</td></tr>";
                         table.append(tr);
                      });

                  }


                }

            });
          });
    });

   

    </script>

<style type="text/css">
html
{text-align:center;}
table
{
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  width:80%;
  border-collapse:collapse;
}
table td, table th 
{
  font-size:1em;
  text-align:center;
  border:1px solid #848284;
  padding:7px 7px 7px 20px;
}

table th 
{
  font-size:1.1em;
  text-align:center;
  padding-top:5px;
  padding-bottom:4px;
}

input.content
{
width:200px;
height:40px;
font-size:20px;
}

input.push
{
width:200px;
height:40px;
font-size:20px;
}

select
{
width:200px;
height:40px;
font-size:20px;
}

h4
{
  font-size:1.1em;
}


</style>
</head>

<body>
  名称: <input type="text" id="item" name="gunName" class='content' placeholder='请输入......'/>
  类型：<select name="type" id="selectType">
  <option value ="1">枪支</option>
  <option value ="2">投掷类爆炸物</option>
  <option value="3">角色</option>
  <option value="4">怪物</option>
  <option value="5">冷兵器</option>
  <option value="6">道具</option>
  </select>
  <button class="btn btn-default btn-lg" id="clicked">Search</button>
  <!--<input type="button" value="Search" id="clicked" class='push'/>-->
<div id="title">
<br>
</div>
<table border="1" id='sr' align="center">
</table>

</body>
</html>